<template>
	
	<view class="page-detail ">
		<image src="../../static/imgs/back.png" mode="" class="icon-back" @click="back"></image>
		<imgBanner :imgList='imgList' :currentImg='currentImg'></imgBanner>
		<view class="user p-30">
			<view class="user-info">
				<view class="user-face">
					<image class="user-image" :src="info.headimgurl" mode="" />
				</view>
				<view class="user-name">{{ info.nick_name }}</view>
			</view>
			<view class="user-likes">
				<!-- <image src="https://img2.baidu.com/it/u=1830508128,2336481149&fm=26&fmt=auto"
					class="user-likes-icon" /> -->
				<!-- {{ userinfo.likecount }} -->
				<text v-if="info.attention == 0" @click="attention(info.uid)">+ 关注</text>
				<text v-if="info.attention == 1" @click="attention(info.uid)">已关注</text>
			</view>
		</view>
		<view>
			
			<view class="p-30">
				<view class="fz30 c-333 mb-14" v-if="info.title">	{{info.title}}</view>
				<view class="fsb df-ac c-72 mb-30" v-if="info.content" v-html="info.content">
				</view>
				<view class="fsb df-ac c-72 mb-30">
					{{info.format_time_add}}
				</view>
				<view class="mui-table-view img-detail-collect-ul">
					<view class="mui-table-view-cell" style="list-style:none;">
					<view class="img-detail-collect-good" style="text-align: center;">
						<view class="mui-icon iconfont icon-favorites" style="margin-left: 3px;">
							<image class="icon-favorites" src="../../static/aixin3.png" alt="">
						</view>
						<view style="font-size: 12px" id="collect_total">{{info.collection}}</view>
					</view>						
						<view style="display: inline-block;">
							<view>
								<view id="real_collect" style="margin-right: 5px; display: inline-block;">
								<view v-for="(item,index) in collectionList" :key="index">
								<image :src="item.headimgurl" alt="" class="img-detail-collect-ul-li-avatar">
								</view>
								</view>
							</view>
						</view>
					</view>
				</view>
							
				<!-- <view class="df-ac bg-f fsb c-72 bs" style="border-radius:22rpx;padding:40rpx 30rpx;">
					<view class="fz30">选择</view>
					<view class="df-ac fz22" @click="show=true">
						请选择颜色/尺码/规格
						<image src="../../static/imgs/arr-r.png" mode="" style="width:14rpx;height:14rpx" class="ml-20"></image>
					</view>
				</view> -->
				<!-- <view class="tab-pro df">
					<view class="tab-pro-item f1" v-for="item in tab" :key="item.id" @click="toggle(item)" :class="{active:item.id==cur}">{{item.name}}</view>
				</view> -->
				
			</view>
		</view>
		
		
		<view class="mui-table-view list-media_goods">
		    <view v-for="(item,index) in goods_list" :key="index" class="mui-table-view-cell mui-media" style="margin-top:5px;margin-bottom:5px;">
				<view class="mui-pull-left">
					<image :src="item.thumb" class="goods_img"></image>
				</view>
				<view class="mui-media-body" @click="goRouter('/pages/detail/detail',{id:item.id})">
					<view class="title">{{item.title}}</view>
					<view class="text-small text-gray">
						<view class="span">{{item.column_name}}</view>
						<view class="span text-gray"> / </view>
						<view class="span">{{item.brand_name}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="p-l-30 p-r-30 p-t-30">
			<view class="block-title fsb df-ac">
				<view class="df-ac">
					<view class="fz36 fw-b">相关推荐</view>
				</view>
				<view>
					<view class="fz24 more" @click="goRouter('/pages/fxian/index')">MORE</view>
				</view>
			</view>
		</view>
		<fengflow :dataLists="list"></fengflow >
		<view id="comment"></view>
		<zwz-comment :comments="comments" @comment-like="handLike" @send-comment="handSend" v-model="commentText" @lower="lower" @reply="reply"></zwz-comment>
		
		
		<view class="pro-footer df">
			<view class="df ml-20"  style="width: 50%;line-height: 30px;margin-top: 10px;">
				<input placeholder="输入评论内容"  @click="show=true"  />
			</view>
			<view class="icon-footer df" style="width: 50%">
				<view class=" btn-ico" @click="showshare=true">
					<image src="../../static/tabbar/fenxiang.png" class="btn-ico-img" mode=""></image>
					<view class="share-text">分享</view>
				</view>
				<view class=" btn-ico" @click="clickPos('comment')">
					<image src="../../static/tabbar/comment.png" class="btn-ico-img" mode=""></image>
					<view class="share-text">{{info.total_comment}}</view>
				</view>
				<view class=" pr btn-ico" @click="collect()" v-if="info.my_collection == 1">
					<image src="../../static/tabbar/collect-a.png" class="btn-ico-img" mode=""></image>
					<view class="share-text">{{info.collection}}</view>
				</view>
				<view class=" pr btn-ico" @click="collect()" v-else>
					<image src="../../static/tabbar/collect.png" class="btn-ico-img" mode=""></image>
					<view class="share-text">收藏</view>
				</view>
				
			</view>
			
		</view>
		<comment :show="show" :comment_id="comment_id" :reply_comment_id="reply_comment_id" @close="show=false"></comment>
		<!-- <share :platform="platform" :shareinfo="shareinfo" @closeshare="showshare=false" :showshare="showshare"></share> -->
		
	</view>
</template>

<script>
	import comment from '../../components/comment.vue'
	import imgBanner from '../../components/imgsBanner-tag/imgsBanner-tag.vue'
	import zwzComment from '../../components/zwz-comment/zwz-comment.vue'
	import share from "../../components/share.vue"
	import fengflow   from '../../components/feng-flow/feng-flow-new.vue'
	import "./css.scss";
	export default {
		components: {
			imgBanner,
			zwzComment,
			comment,
			share,
			fengflow
		},
		data() {
			return {
				info:{},
				cur:1,
				imgList:[
					// '../../static/goods/faxian1.png',
				],
				currentImg:0,  //当前默认选中
				show:false,
				//userinfo:{id:2,img:'../../static/user/poster.jpg',likecount:'123',nickname:'张三',avatar:'../../static/imgs/user.jpg',title:'甄选项目 I 第七代AOPT超光子',desc:'超光子嫩肤M22+修丽可联合治疗全模式/淡斑祛痘'},
				comments: [
					{
						id: 1,
						avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/s1l0JVpxz2AFVEs3QmvYCP0w0LliazLmict2qCSQs1Otts8YoCHutdicnW0VicfEez2m9D8wXVlA18IjGTTmfOaMHA/132',
						nickname: 'zzz',
						content: '我是评论。',
						addTime: '刚刚',
						isLike: '0',
						likeNums: 26,
						layer: 1,
						superNickname: null,
						superCommentId: null,
						children: [
							{
								id: 2,
								avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/s1l0JVpxz2AFVEs3QmvYCP0w0LliazLmict2qCSQs1Otts8YoCHutdicnW0VicfEez2m9D8wXVlA18IjGTTmfOaMHA/132',
								nickname: '程序猿2',
								content: '我是回复。',
								addTime: '刚刚',
								isLike: '0',
								likeNums: 23,
								layer: 2,
								superNickname: 'zzz',
								superCommentId: 1
							},
							{
								id: 3,
								avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/s1l0JVpxz2AFVEs3QmvYCP0w0LliazLmict2qCSQs1Otts8YoCHutdicnW0VicfEez2m9D8wXVlA18IjGTTmfOaMHA/132',
								nickname: '马老师',
								content: '我是回复的回复。',
								addTime: '刚刚',
								isLike: '0',
								likeNums: 69,
								layer: 3,
								superNickname: '程序猿2',
								superCommentId: 1
							}
						]
					}
				],
				commentText: "",
				platform:'',
				showshare:false,
				shareinfo:{
					url:'',
					providers:4,
					provider:{}
				},
				list:[
					
					// {id:2,coverImg:'http://cdn.houselanlanli.com/community/img/20211206/1638778376_9000_2174活动.jpg',collection:'123',nick_name:'张三',headimgurl:'../../static/imgs/user.jpg',title:'甄选项目 I 第七代AOPT超光子',content:'超光子嫩肤M22+修丽可联合治疗全模式/淡斑祛痘'},
					// {id:3,coverImg:'http://cdn.houselanlanli.com/community/img/20211206/1638778376_9000_2174活动.jpg',collection:'43',nick_name:'李四',headimgurl:'../../static/imgs/user.jpg',title:'甄选项目 I 进口除皱专场',content:'美国进口品牌除皱20单位/单部位除皱/高级审美/抗衰年轻化'},
					// {id:4,coverImg:'../../static/goods/faxian3.png',collection:'76',nick_name:'王五',headimgurl:'../../static/imgs/user.jpg',title:'甄选项目 I 第七代AOPT超光子',content:'超光子嫩肤M22+修丽可联合治疗全模式/淡斑祛痘'},
					
					],
					id:0,
				collectionList:[],//收藏者列表
				goods_list:[],//分享商品列表
				comment_id:this.id,//要回复的帖子
				reply_comment_id:0,
			}
		},
		onLoad(options) {
			console.log("options")
			console.log(options)
			this.id = options.id
			this.init();
		},
		created() {
			//this.init()
		},
		methods: {

			reply(index){
				console.log("回复信息");
				console.log(index);
				var content = this.comments[index]
				this.reply_comment_id = content.id
				this.show = true
				console.log(content)
			},
			toggle(data) {
				this.cur = data.id
			},
			back() {
				uni.navigateBack()
			},
			attention(uid){
				//关注用户 concern=1&adminId=9622
				var concern = this.info.attention;
				concern = concern == 1 ? 0 : 1;
				var query = {
					adminId:uid,
					concern:concern
				}
				this.$api.communityConcernUpd(query).then(res=> {
						 console.log("关注用户")
							console.log(res)
							if(res.code == 0){
								this.info.attention = concern
							}
							this.loadShow = false;
				}).catch(err=> { console.log(err) }
				);
			},
			//收藏
			collect(){
				//收藏帖子 communityId=14&collection=1
				var id = this.info.id;
				var collection = this.info.my_collection;
				collection = collection == 1 ? 0 : 1;
				var query = {
					communityId:id,
					collection:collection
				}
				this.$api.communityCollectionUpd(query).then(res=> {
						 console.log("收藏帖子")
							console.log(res)
							if(res.code == 0){
								this.info.my_collection = collection
								if(collection == 1){
									this.info.collection += 1;
								}else{
									this.info.collection -= 1;
								}
							}
							this.loadShow = false;
				}).catch(err=> { console.log(err) }
				);
			},
			async init() {
				
				var query = {
					"type": 'post_detail', // 全等于筛选，对应fieldEq
					"community_id": this.id, // id
				}
				 let res = await this.$api.communityData(query).then(res=> {
					 console.log("发现详情")
						console.log(res)
						if(res.code == 0){
							this.list = res.communityList;//推荐帖子
							this.imgList = res.list.thumb;//轮播图
							this.info = res.list;//帖子详情
							this.collectionList = res.collectionList;//收藏者列表
							this.goods_list = res.goods_list;//
							this.comments = res.commentList;
							console.log(this.list);
						}
						this.loadShow = false;
				 }).catch(err=> { console.log(err) }
				 );
			},
			clickPos (id){
			//点击题号跳转 
			document.querySelector('#'+id).scrollIntoView()    
			
			},
		}
	}
</script>

<style lang="scss">
	.btn-add-car{
		    
	}
.page-detail {
	position: relative;
	background-color: #fdfdfd;
	padding-bottom: 130rpx;
	.product {
		width: 100vw;
		height: 830rpx;
		border-radius:  0 0 40rpx 40rpx;
	}
	.product-img {
		height: 830rpx;
	}
	.icon-back {
		width: 30rpx;
		height: 30rpx;
		position: fixed;
		left: 30rpx;
		top: 60rpx;
		z-index: 100;
	}
	.tab-pro {
		.tab-pro-item {
			font-size: 30rpx;
			color: #282A32;
			height: 110rpx;
			line-height: 110rpx;
			margin-bottom: 30rpx;
			text-align: center;
			position: relative;
			&.active {
				font-size: 36rpx;
				color: #000;
				&::after {
					content:'';
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					width: 110rpx;
					height: 7rpx;
					background-color: #573BD1;
					font-weight: bold;
				}
			}
		}
	}
	.pro-param {
		line-height: 40rpx;
		font-size: 30rpx;
		padding: 30rpx;
		border-bottom: 1px solid #ECECEC;
		.param-label {
			width: 120rpx;
			text-align: right;
			color: #706B7D;
		}
		.param-value {
			text-align: right;
			color: #282A32;
		}
	}
	.pro-footer {
		padding: 50rpx;
		background-color: #fff;
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		.btn {
			padding: 20rpx 40rpx;
			color: #fff;
			font-size: 26rpx;
			box-shadow: 0px 7rpx 22rpx -7rpx rgba(255,121,109,0.70); 
			border-radius: 7rpx;
			&.btn-add {
				background: linear-gradient(225deg,#ff9668, #ff5d72);
			}
			&.btn-buy{
				background: linear-gradient(90deg,#8663e8, #4f34cc);
			}
			&:first-child {
				margin-right: 20rpx;
			}
		}
		.icon-footer {
			flex:1;
			image {
				width: 50rpx;
				height: 50rpx;
				// flex:1;
			}
		}
	}
	.tag-total {
		position: absolute;
		border-radius: 50%;
		padding: 4rpx;
		font-size: 22rpx;
		background-color: #FE5634;
		color: #fff;
		top: 0;
		right: 0;
	}
}

</style>
